<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子:{{ money }}</h4>
    <h4>车子:{{ car.brand }}车，价值：{{ car.price }}万元</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from "./Child.vue";
  import { ref, reactive, provide } from "vue";
  // provide就是提供，这边提供数据，祖孙组件注入数据

  let money = ref(100);
  let car = reactive({
    brand: "奔驰",
    price: 100,
  });

  function updateMoney(value: number) {
    money.value -= value;
  }

  /**
   * 向后代提供数据。所有的后代,
   * 这里传递值的时候不需要money.value，因为你要保证你传递的是响应式对象
   *  */
  provide("moneyContext", { money, updateMoney });

  provide("che", car);
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 1.25rem;
    border-radius: .625rem;
  }
</style>
